<template>
  <view class="mask" v-if="showAddTourist"></view>
  <view class="bottom-popup-container" :class="{ show: showAddTourist }">
    <view class="popup-content">
      <!-- Header -->
      <view class="header">
        <view style="width: 16%;" @click="closeTourist">
          <wd-icon name="arrow-left" size="22px" @click="handleGoBack"></wd-icon>
        </view>
        <text class="title">选择游客</text>
        <view class="save-btn flex items-center" @click="addNewTourist">
          <text>新增</text>
          <img class="add-img" src="http://img.abatour.com/2025-05-06/jia%20(1)_1746509607479.png"></img>
        </view>
      </view>

      <!-- Tourist List -->
      <scroll-view class="tourist-list" scroll-y v-if="tourists.length">
        <wd-checkbox-group v-model="choiceTouristIdList" :max="props.choiceProduct.number">
          <wd-cell center clickable v-for="tourist in tourists" :key="tourist.id">
            <template #title>
              <view class="flex items-center">
                <view class="flex items-center">
                  <wd-checkbox
                      custom-class="custom-checkbox-class"
                      :model-value="tourist.id"
                      size="large"
                      checked-color="#1b9c61"
                      :disabled="!!tourist.tipContent"
                  ></wd-checkbox>
                </view>
                <view class="pl20">
                  <view>{{ tourist.name }}</view>
                  <view class="id-card">
                    <text>{{ transferIdCardType(tourist.idType) }}</text>
                    <text> {{ tourist.idCard }}</text>
                    <view v-if="tourist.tipContent" class="tip-content mt10">{{ tourist.tipContent }}</view>
                  </view>
                </view>
              </view>
            </template>
            <wd-icon name="edit" size="22px" @click="handleEditTouristInfo(tourist)"></wd-icon>
            <wd-icon name="delete1" size="22px" @click="handleDeleteTouristInfo(tourist)"></wd-icon>
          </wd-cell>
        </wd-checkbox-group>

      </scroll-view>
      <wd-status-tip v-else image="content" tip="去添加游客信息"/>
      <!-- Add New Tourist Button -->
      <view class="add-tourist" @click="chooseTourist" >
        <text>确定</text>
      </view>
      <editTourist
          :isAdd="isAdd"
          :touristObj="touristObj"
          :showEditTourist="showEditTourist"
          @close="closeEditTourist"
      ></editTourist>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineOptions({
  options: {
    styleIsolation: 'shared'
  }
})
import {removeTourist} from "@/api/common";
import editTourist from "@/components/EditTourist/index.vue";
import {defineComponent, ref} from 'vue';
import {TouristItem} from "@/types/props"; // 引入图片
import {watch} from "vue";
import {useMixin} from "@/hook/useMixin";

const {transferIdCardType} = useMixin();

const props = defineProps({
  showAddTourist: {
    type: Boolean,
    default: false //默认不显示
  },
  touristInfoList: {
    type: Array,
    default: []
  },
  choiceProduct: {
    type: Object,
    default: {}
  },
  choiceProductIdList: {
    type: Array,
    default: [] as number[]
  }
});
const emit = defineEmits(['close', 'queryTouristList']);
const showEditTourist = ref(false);
const tourists = ref<TouristItem[]>([])
const isAdd = ref(true);
const touristObj = ref<TouristItem>({
  userId: "",
  name: "",
  idType: 1,
  idCard: "",
  tel: "",
  isChecked: false
});
const choiceTouristIdList = ref<number[]>([]);

watch((props), (value) => {
  console.log(value, 'choiceProductIdList---watch');
  choiceTouristIdList.value = [];
  if (value.touristInfoList) {
    tourists.value = value.touristInfoList as TouristItem[];
  }
  if (value.choiceTouristIdList && value.choiceTouristIdList.length > 0) {
    choiceTouristIdList.value = value.choiceTouristIdList as number[];
  }
}, {deep: true, immediate: true});

// 隐藏弹出层
const closeTourist = () => {
  emit('close', {});
  choiceTouristIdList.value = [];
};
const chooseTourist = () => {
  if (choiceTouristIdList.value.length == 0) {
    uni.showToast({
      title: '未选择游客',
      icon: 'none'
    })
    return;
  }
  emit('close', {choiceTouristIdList: choiceTouristIdList.value,test:123}); // Emit 'close' event to notify the parent component
  choiceTouristIdList.value = [];
};
const addNewTourist = () => {
  touristObj.value = {
    userId: "",
    name: "",
    idType: 1,
    idCard: "",
    tel: "",
    isChecked: false
  };
  isAdd.value = true;
  showEditTourist.value = true;
}
const closeEditTourist = (event: { status: Boolean }) => {
  showEditTourist.value = false;  // Hide the AddTourist component
  let {status} = event;
  if (status) {
    emit("queryTouristList");
  }
};
const handleGoBack = () => {
  emit("close", {choiceTouristIdList: []});
  choiceTouristIdList.value = [];
};
const handleEditTouristInfo = (item: TouristItem) => {
  touristObj.value = item;
  isAdd.value = false;
  showEditTourist.value = true;
};
const handleDeleteTouristInfo = (item: TouristItem) => {
  uni.showModal({
    title: '删除确认',
    content: '您确定要删除这条用户名为“' + item.name + '”数据吗？',
    success(res) {
      if (res.confirm) {
        removeTourist(item).then(res => {
          if (res.success) {
            uni.showToast({
              title: '删除成功'
            })
          }
          emit("queryTouristList");
        })
        // 在这里执行删除操作
      } else if (res.cancel) {
        console.log('用户点击了取消');
      }
    }
  });
};
const choiceTourist = (event) => {
  let {number, skuName} = props.choiceProduct;
  if (event.target.value.length > number) {
    uni.showToast({
      icon: "none",
      title: `您只需选择${number}位${skuName}`
    })
    choiceTouristIdList.value.length = number;
    return;
  }
  choiceTouristIdList.value = event.target.value;
  console.log(event.target.value, 'event');
  console.log(props.choiceProduct, 'choiceProduct');
};

</script>

<style scoped lang="scss">
.addbtn {
  border-radius: 10rpx;
  background-color: #fff;
  border: 1px solid #1B9C61;
  width: 174rpx;
  height: 60rpx;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 25rpx;
  color: #2B2B24;
  line-height: 60rpx;
}

/* 遮罩层 */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  z-index: 9998;
}

/* 弹出层容器 */
.bottom-popup-container {
  height: 1007rpx;
  background: linear-gradient(to bottom, #CFDDD4 0%, #FFFFFF 20%);
  border-radius: 10rpx 10rpx 0rpx 0rpx;
  position: fixed;
  bottom: -100%; /* 初始位置在屏幕外 */
  left: 0;
  right: 0;
  /* box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.1); */
  transform: translateY(100%); /* 初始状态向上偏移 */
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* 动画效果 */
  opacity: 0; /* 初始透明度 */
  z-index: 9999;
}

/* 显示时的状态 */
.bottom-popup-container.show {
  bottom: 0; /* 显示时的位置 */
  transform: translateY(0); /* 平移到正常位置 */
  opacity: 1; /* 完全不透明 */
}

/* 关闭时的状态 */
.bottom-popup-container.hide {
  bottom: -100%; /* 向下移动至屏幕外 */
  transform: translateY(-100%); /* 向上偏移 */
  opacity: 0; /* 完全透明 */
}

.popup-content {
  padding: 0 5%;
}

.header {
  border-bottom: 1rpx solid #E4E5DE;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  margin-bottom: 30rpx;
}

.backImg {
  height: 28rpx;
  width: 15rpx;
}

.title {
  text-align: center;
  width: 68%;
  height: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 29rpx;
  color: #2B2B24;
  line-height: 35rpx;
}

.save-btn {
  padding: 4rpx 16rpx;
  border-radius: 7rpx;
  background: #1b9c61;
  font-weight: bold;
  font-size: 22rpx;
  color: #FFFFFF;
  line-height: 42rpx;

  .add-img {
    margin-left: 6rpx;
    width: 29rpx;
    height: 29rpx;
  }
}

.tourist-list {
  height: 600rpx; /* 设置固定高度 */
}

.btn {
  display: flex;
  float: right;
  gap: 20rpx;
}

.uni-list-cell {
  display: flex;
  border-bottom: 1rpx solid #E4E5DE;
  margin: 25rpx;
  padding: 20rpx 0;
  display: flex;
  justify-content: space-around;
}

.tourist-info {
  display: flex;
  width: 80%;
  flex-direction: column;
}

.name {
  font-size: 30rpx;
  margin-bottom: 10rpx;
}

.id-card {
  font-size: 26rpx;
  color: #666;
}

.tip-content {
  color: red;
  font-size: 26rpx;
}

.edit {
  width: 27rpx;
  height: 28rpx;
  margin: 25rpx 0;
}

.add-tourist {
  position: absolute;
  bottom: 10%; /* 初始位置在屏幕外 */
  color: #fff;
  text-align: center;
  width: 80%;
  margin: 0 5%;
  height: 69rpx;
  line-height: 69rpx;
  background: #1B9C61;
  border-radius: 10rpx;
}

::v-deep.custom-checkbox-class {
  margin-bottom: 0 !important;

  .wd-checkbox__shape {
    width: 46rpx !important;
    height: 46rpx !important;
  }

  .wd-checkbox__label {
    margin-left: 0 !important;
  }
}
</style>
